<template>
<div class="main">
	<div class="banner" v-if="banner">
  	<a-row class="wh banner-inner">
    	<a-col :xs=0 :sm=0 :md=12 :lg=12 :xl=12>
        <div class="text">
          <div class="en line-01">{{banner[0].resText[0].text}}</div>
          <div class="line-02">{{banner[0].resText[1].text}}</div>
        </div>
        <div class="btn">
          <a target="_blank" :href="banner[0].resText[2].link" class="button en">{{banner[0].resText[2].text}}<span></span></a>
          <a target="_blank" :href="banner[0].resText[3].link" class="button">{{banner[0].resText[3].text}}<span></span></a>
        </div>
      </a-col>
      <a-col :xs=0 :sm=0 :md=12 :lg=12 :xl=12 style="padding-top:60px;">
 				<img :src="banner[1].resUrl | setResUrl" />     	
      </a-col>
    </a-row>
  </div>
  <div class="w tab-side" v-if="peculiary">
  	<div v-html="peculiary[0].resContent"></div>
    <a-row class="tab1 boxshw">
      <a-col class="col1" :xs=24 :sm=24 :md=12 :lg=8 :xl=8 v-for="item in peculiary[1].resText" :key="item.text">
        <div class="media">
          <div class="media-left">
            <a-icon :type="item.text" />
          </div>
          <div class="media-body" v-html="item.link">
            <h4 class="media-heading">多平台一站管理</h4><p>可同时管理<span class="en">PC/APP/</span>小程多个平台</p>
          </div>
        </div>
      </a-col>          
    </a-row>       
  </div>  
  <div class="w tab-tt" v-if="skill">
		<div v-html="skill[0].resContent"></div>
    <a-row class="tab3 en boxshw">
    	<a-col class="col2" :xs=12 :sm=12 :md=6 :lg=6 :xl=6  v-for="item in skill[1].resText" :key="item.id">
    	 	<a-progress :percent="parseInt(item.text)" :strokeWidth="10" :format="percent => item.link"  type="dashboard" stroke-linecap="square" status="active" />
      </a-col>                        
    </a-row> 
  </div>
	<div class="w tab-tt" v-if="contents">
  	<div v-html="contents[0].resContent"></div>  
		<a-row class="tab3 en boxshw">
     	<a-col class="col4" :xs=24 :sm=24 :md=16 :lg=8 :xl=8 v-for="item in contents[1].resText " :key="item.id">
    	 <a-progress :percent="parseInt(item.text)"  :stroke-width="10" :format="percent => item.link"  stroke-linecap="square"  status="active" />
      </a-col>                                 	
		</a-row>
  </div>      
</div>
</template>

<script>
import api from "@/global/api";
export default {	
  data() {
    return {
			banner:'',
			peculiary:'',
			skill:'',
			contents:''
    }
  },	
	mounted(){
		this.asyncData();	
	},
  methods: {
		async asyncData() {
			let channel = this.$route.name;	
			let res = await this.$http.get(api.getChannel,{params:{channel}})
			//let title = res.data.pageTitle;
			//let description = res.data.pageDescription;
			let pageData = res.data.pageData;
			this.banner = pageData.banner;
			this.peculiary = pageData.peculiary;
			this.skill = pageData.skill;
			this.contents = pageData.contents;
			//return {banner,peculiary,skill,contents,title,description}
		},		
	},
	filters: {
		setResUrl(val){
			return api.host+val;	
		}
	}
}
</script>
<style>
.tab-h2{font-size: 36px; font-weight:normal; text-align: center; letter-spacing: 1px; color: #1296DB; margin-bottom:10px;}
.tab-p {font-size: 18px; text-align: center;letter-spacing: 1px; color: #999; margin: 0 0 40px 0;}
</style>
<style scoped>
.banner{width:100%;  overflow:hidden; background:#fff;  margin-bottom:50px;}
.banner-inner{ box-sizing:border-box; overflow:hidden; position:relative; background:#fff;}
.banner-inner .text{ position:absolute; top:120px; left:30px;  font-size:50px;}
.banner-inner .line-01{ font-size:50px; color:#00AAE1;}
.banner-inner .line-02{ padding-top:10px; font-style:italic; color:#999; font-size:14px;}
.banner-inner .btn{position:absolute; top:260px; left:30px; z-index:22;}
.button{border: none; display:inline-block; text-align:center; line-height:46px; width:150px; height:46px; vertical-align:middle; margin-right:15px; position: relative; outline:none; font-size: 16px; background:transparent; cursor: pointer; user-select: none; color: #00AAE1; overflow: hidden;}
.button span{ box-sizing: border-box;position: absolute;left: 0;top: 0;width:100%;height:100%;background:#fff; z-index: -1; border: 5px solid #00AAE1;}
.button span::before{content: '';position: absolute;width: 8%;height: 600%;background:#fff; top: 50%;left: 50%;transform:translate(-50%, -50%) rotate(-60deg);transition: all .3s;}
.button:hover span::before, button:active span::before{transform: translate(-50%, -50%) rotate(-90deg); width: 100%; background:#00AAE1;}
.button:hover, button:active {color: #fff;border-color: #00AAE1}
.tab1{ overflow:hidden; padding:30px 15px 30px; background:#fff;}
.tab2{ overflow:hidden; padding:0 15px 30px; background:#fff;}
.media{ display:flex; color: #666; transition:all 0.1s ease; cursor:pointer;}
.media-left{ margin:0 15px 0 10px; border:1px solid #666; width:65px; text-align:center; line-height:65px; height:65px; border-radius:65px;}
.media-left i{ vertical-align:middle; font-size:35px;}
.col1{padding: 20px 20px 30px 20px}
.media-body >>> p{ font-size:14px;}
.media-body >>> .media-heading{margin: 5px 0 6px 0; font-size:16px; overflow:hidden;}
.media:hover{ color:#1296DB; transition:all 0.1s ease;}
.media:hover .media-left{ border:1px solid #1296DB;transition:all 0.1s ease;}
.media:hover .media-heading{ color:#1296DB; transition:all 0.1s ease;}
.tab-side{ margin-bottom:50px;}
.tab3{ overflow:hidden; padding:50px 30px; background:#fff;}
.col2{ text-align:center; font-weight:bold;}
.tab-tt{ margin-bottom:50px;}
.col4{ text-align:center; padding:15px 20px 25px 90px;}
.col4 >>> .ant-progress-inner{ border-radius:0;}
.col4 >>> .ant-progress-success-bg, .col4 >>> .ant-progress-bg{ background-color:#2DB7F5}
.col4 >>> .ant-progress-text{ position:absolute; text-align:right; width:80px; top:3px; left:-95px;}
</style>